<template>
  <el-dropdown :hide-on-click="false" class="controller">
    <img src="../../images/menu.png">
    <el-dropdown-menu slot="dropdown">
      <div class="title">列控制器</div>
      <el-checkbox-group :min="1" v-model="checkList">
        <el-dropdown-item v-for="(item, index) in checkItems" :key="index" :divided="index==0">
          <el-checkbox :label="item.name" @change="change(index)" />
        </el-dropdown-item>
      </el-checkbox-group>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  props: {
    checkItems: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data: function() {
    return {
      checkList: []
    }
  },

  created() {
    for (const x in this.checkItems) {
      if (this.checkItems[x].check) {
        this.checkList.push(this.checkItems[x].name)
      }
    }
  },

  methods: {
    change(index) {
      this.$emit('change', index)
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
@import '../../styles/index.scss';
.controller {
  padding: 10px 19px;
  width: 70px;
  text-align: center;
  border: none;
  img {
    width: 32px;
    height: 32px;
    transition: all 0.75s;
  }
}
.controller:hover {
  img {
    transform: rotate(90deg);
  }
}
.title {
  text-align: center;
  padding: 6px 0;
  color: $textGray;
}
</style>

